<template>
  <div class="permissionSetting">
    <div class="ps">
      <div class="ps-top">
        <p>权限设置</p>
        <i
          class="el-icon-close"
          @click="
            () => {
              this.$emit('closePS')
            }
          "
        ></i>
      </div>
      <div class="ps-content">
        <div>
          <span>操作员名称</span>
          <el-select
            v-model="operator"
            style="margin-right: 10px"
            @change="selectOperator"
          >
            <el-option
              v-for="item in operatorList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right">{{ item.label }}</span>
            </el-option>
          </el-select>
          <el-button @click="selectAll" type="primary">全部选中</el-button>
          <el-button @click="selectNone">全部不选</el-button>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane
            v-for="i in headList"
            :key="i.name"
            :label="i.label"
            :name="i.name"
          ></el-tab-pane>
        </el-tabs>
        <div>
          <div v-for="i in permissionList" :key="i.label">
            <span>{{ i.label }}</span>
            <el-switch v-model="i.value"></el-switch>
          </div>
        </div>
        <div class="ps-btn">
          <el-button
            @click="
              () => {
                this.$emit('closePS')
              }
            "
            >取消</el-button
          >
          <el-button @click="determine" type="primary">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  allPermissionList,
  alreadyPermissionList,
  modifyPermission
} from '../../../../network/operatoryCommand'

export default {
  props: {
    operatorList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      operator: '',
      activeName: '1',
      headList: [], // tab栏上面的标题列表
      // 显示的
      permissionList: [],
      // 所有的
      permissionList1: [],
      permissionList2: [],
      permissionList3: [],
      permissionList4: [],
      permissionList5: [],
      permissionList6: [],
      permissionList7: [],
      permissionList8: [],
      permissionList9: [],
      permissionList10: [],

      count: 1
    }
  },
  watch: {
    activeName(a, b) {
      // console.log(a)
      this.permissionList = this[`permissionList${a}`]
    }
  },
  methods: {
    selectOperator(e) {
      alreadyPermissionList({ userId: e }).then((res) => {
        // console.log('11', res)
        if (res.data.code == 200 && res.data.data) {
          for (const key in res.data.data) {
            if (res.data.data.hasOwnProperty(key)) {
              const element = res.data.data[key]
              if (!element) continue
              if (
                !this.headList.filter((i) => {
                  return i.id == key
                }).length
              )
                continue
              let tmpIndex = this.headList.filter((i) => {
                return i.id == key
              })[0].name
              // console.log(tmpIndex)
              element.forEach((e) => {
                for (const i of this[`permissionList${tmpIndex}`]) {
                  // console.log(i)
                  // console.log(e)
                  if (i.permissionId == e.id) {
                    i.value = true
                    break
                  }
                }
              })
            }
          }
        }
      })
      for (let i = 1; i < 10; i++) {
        for (const j of this[`permissionList${i}`]) {
          if (j.value) {
            j.value = false
          } else continue
        }
      }
    },

    selectAll() {
      for (const i of this[`permissionList${Number(this.activeName)}`]) {
        i.value = true
      }
    },
    selectNone() {
      for (const i of this[`permissionList${Number(this.activeName)}`]) {
        i.value = false
      }
    },
    determine() {
      if (!this.operator) {
        this.$alert('请先选择操作员', '', {
          confirmButtonText: '确定'
        })
        return
      }
      let d = {
        userId: this.operator,
        permissionMap: {}
      }
      for (let i = 1; i <= this.count; i++) {
        this[`permissionList${i}`].forEach((e) => {
          d.permissionMap[e.permissionId] = e.value
        })
      }
      // console.log(d)
      // return
      modifyPermission(JSON.stringify(d)).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: '修改权限成功',
            type: 'success'
          })
        } else {
          this.$message.error('修改权限失败')
        }
      })
    },

    _allPermissionList() {
      allPermissionList().then((res) => {
        // 获取菜单的列表
        console.log('获取菜单的列表', res)
        if (res.data.code != 200) return
        this.headList = []
        this.count = 1
        for (const key in res.data.data) {
          if (res.data.data.hasOwnProperty(key)) {
            const element = res.data.data[key]
            // console.log(key.match(RegExp('permissionName'+'=([^,]+)'))[1])
            this.headList.push({
              label: key.match(RegExp('permissionName' + '=([^,]+)'))[1],
              name: `${this.count}`,
              id: key.match(RegExp('id' + '=([^,]+)'))[1]
            })
            // console.log(element)
            this[`permissionList${this.count}`] = []
            element.forEach((e) => {
              this[`permissionList${this.count}`].push({
                label: e.permissionName,
                value: false,
                permissionId: e.id,
                rolePermissionId: e.pid
              })
            })
            this.count++
          }
        }
        this.permissionList = this.permissionList1
      })
    }
  },
  created() {
    this._allPermissionList()
  }
}
</script>

<style scoped>
.ps {
  position: fixed;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 1250px;
  height: 585px;
  z-index: 99;
  background-color: white;
}
.ps .ps-top {
  height: 40px;
  background-color: #f8f8f8;
}
.ps .ps-top p {
  float: left;
  line-height: 40px;
  padding-left: 20px;
}
.ps .ps-top i {
  float: right;
  line-height: 40px;
  padding: 0 16px;
}
.ps-content {
  width: 1200px;
  margin: 0 25px;
}
.ps-content > div:first-child {
  background-color: #f8f8f8;
  margin: 10px 0;
}
.ps-content > div:first-child span {
  line-height: 60px;
  margin: 0 10px;
}
.ps-content > div:nth-child(3) {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 340px;
  /* align-items: center; */
}
.ps-content > div:nth-child(3) > div {
  width: 400px;
  border-bottom: 2px solid #f8f8f8;
}
.ps-content > div:nth-child(3) span {
  line-height: 40px;
}
.ps-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 20px 20px 0;
}
</style>

<style>
.ps .el-input,
.ps .el-input__inner {
  width: 160px;
  height: 30px;
}
.ps .ps-content .el-switch {
  float: right;
  margin: 10px 15px 0;
}
.ps .el-tabs__item {
  font-size: 16px;
}
</style>
